<template>
  <div class="hello">
    <div id="page" class="layout">
      <div>
        <!-- 截图区域 -->
        <div
          class="content"
          id="content"
          ref="content"
          style="
            background-image: url('https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg');
          "
        >
          <div style="width: 500px; height: auto; margin: 0 auto; padding: 0">
            <h2 style="margin: auto">this is title!</h2>
            <img
              src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg"
              alt=""
            />
            <img
              src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg"
              alt=""
            />
            <img
              src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg"
              alt=""
            />
            <img
              src="https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg"
              alt=""
            />
            <p style="color: green">
              vue项目中使用html2canvas截图不全的问题
              原因：横向滚动轮造成，因为html2canvas是根据body进行截图，若内容宽度长于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)
              Y-SA版权协议，转载请附上原文出处链接及本声明。
              vue项目中使用html2canvas截图不全的问题
              原因：横向滚动轮造成，因为html2canvas是根据body进行截图，若内容宽度长于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)
              解决方案：(首先是获取你要截取页面的父div，通过clone并紧随于body之后，在生成幕布的时候不再拿着父div去截取，而是截取clone的div，这样的话，就可以实现整个页面的截取了。)不能使用跨源的图片。若是使用了，html2canvas将不会读取资源
            </p>
          </div>
        </div>
        <!-- 点击调用方法获取截图 -->
        <div>
          <button class="btn" @click="getPrintScreen">截图预览</button>
        </div>
      </div>
    </div>
    <div>
      <div class="img-box">
        <!-- 通过img标签把获取到的截图呈现出来 -->
        <img :src="imgUri" alt="" crossOrigin="anonymous" />
      </div>
      <div id="img">
        <button class="btn" @click="getPicState">图片另存为</button>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

export default {
  name: "HelloWorld",
  data() {
    return {
      imgUri: "", //截图地址
      imgs: [],
      backgrounds: [],
      size: {},
      fileExt: "",
    };
  },
  methods: {
    // 获取截图方法
    getPrintScreen() {
      //处理image标签
      //查找img标签
      this.imgs = document.getElementById("content").querySelectorAll("img");
      if (this.imgs || this.imgs.length > 0) {
        this.imgs.forEach((item) => {
          // 转码
          let baseCode = this.toBase64(item.src);
          console.log(baseCode);
          // 重新赋值给img的src
          // item.src = baseCode;
        });
      }
      //处理背景图片
      //获取背景图片 document.getElementById('content')
      this.backgrounds = this.$refs.content.style.backgroundImage;
      let baseUrl = this.toBase64(this.backgrounds);
      console.log(baseUrl);
      //重新赋值
      // this.$refs.content.style.backgroundImage.url = baseUrl;
      html2canvas(this.$refs.content).then((canvas) => {
        let url = canvas.toDataURL("image/png", 1.0); // toDataURL: 图片格式转成 base64   replace("image/png","image/octet-stream")
        this.imgUri = url;
      });
      //这里可用 $("#content");document.getElementById('content');
      // html2canvas(document.querySelector("#content")).then(canvas =>{
      //     html2canvas(document.querySelector("#content"), {
      //         backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
      //         useCORS: true, //支持图片跨域
      //         tainttest: true,//检测图片已经全部加载完成
      //         scrollX: 0,//解决滚动导致截图不全
      //         scrollY: 0,
      //         scale: 1, //解决高清屏图片模糊
      //         allowTaint: false,//允许污染画布
      //     }).then((canvas) => {
      //         // 把生成的base64位图片上传到服务器,生成在线图片地址
      //         let url = canvas.toDataURL("image/png", 1.0); // toDataURL: 图片格式转成 base64   replace("image/png","image/octet-stream")
      //         this.imgUri = url;
      //         console.log(this.imgUri)
      //     })
      //     console.log(canvas,"fngvjksfdvldf")
      // })
    },
    //图片转码

    // toBase64(img) {
    // html2canvas(images).then(canvas => {
    //     let dataURL = canvas.toDataURL("image/png", 1.0);
    //     return dataURL;
    // })
    /**
     * @param imgUrl 图片链接或者地址
     * @returns {string}
     */
    toBase64(imgUrl) {
      const image = new Image();
      // 解决跨域问题
      image.setAttribute("crossOrigin", "anonymous");
      const imageUrl = imgUrl;
      image.src = imageUrl;
      image.onload = () => {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 1; //图片质量
        // 这里的dataurl就是base64类型
        const dataurl = canvas.toDataURL("image/png", quality);
        return dataurl;
      };
    },

    //下载图片方法
    getPicState() {
      var eleLink = document.createElement("a");
      eleLink.href = this.imgUri; // 转换后的图片地址
      eleLink.download = "pictureName";
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
  },
};
</script>
<style scoped>
.layout {
  display: flex;
  justify-content: space-around;
}

.content {
  background-image: url("https://www.aykj.net/uploadDir/jpg/20200103/1578051450220.jpg");
  size: 25px;
}

.content img {
  max-width: 100%;
  object-fit: contain;
}
</style>
